<script lang="ts" setup>
import type { ChannelPerformance } from "../composables/useDataReport"
import { formatCompletionRate, getCompletionRateColor } from "../composables/useDataReport"

interface Props {
  data: ChannelPerformance[]
  loading?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

// 计算完成率样式
function getCompletionRateStyle(rate: number) {
  return {
    color: getCompletionRateColor(rate),
    fontWeight: 600
  }
}

// 获取最高完成率的行样式（适配 Element Plus 的签名）
function getRowClass({ row }: { row: ChannelPerformance, rowIndex: number }) {
  const maxRate = Math.max(...props.data.map((item: ChannelPerformance) => item.completionRate))
  return row.completionRate === maxRate ? "highlight-row" : ""
}
</script>

<template>
  <div class="channel-effect-table">
    <CardHeader title="渠道绩效状况" />

    <div class="table-content">
      <el-table
        :data="data"
        v-loading="loading"
        :row-class-name="getRowClass"
        height="100%"
        style="width: 100%; touch-action: auto;"
      >
        <el-table-column prop="channel" label="渠道服务商" min-width="120" show-overflow-tooltip>
          <template #default="{ row }">
            <div class="channel-name">{{ row.channel }}</div>
          </template>
        </el-table-column>

        <el-table-column prop="totalProducts" label="邀请码总数" align="center" min-width="80">
          <template #default="{ row }">
            <span class="number-value">{{ row.totalProducts }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="completedCount" label="已兑换数" align="center" min-width="80">
          <template #default="{ row }">
            <span class="number-value">{{ row.completedCount }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="completionRate" label="兑换率" align="center" min-width="80">
          <template #default="{ row }">
            <span
              class="completion-rate"
              :style="getCompletionRateStyle(row.completionRate)"
            >
              {{ formatCompletionRate(row.completionRate) }}
            </span>
          </template>
        </el-table-column>

        <el-table-column prop="userCount" label="用户数" align="center" min-width="60">
          <template #default="{ row }">
            <span class="number-value">{{ row.userCount }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="validAccountCount" label="绑定账号数" align="center" min-width="80">
          <template #default="{ row }">
            <span class="number-value">{{ row.validAccountCount }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="totalContent" label="总发布内容" align="center" min-width="80">
          <template #default="{ row }">
            <span class="number-value">{{ row.totalContent }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="activeUsers" label="活跃用户" align="center" min-width="70">
          <template #default="{ row }">
            <span class="number-value">{{ row.activeUsers }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.channel-effect-table {
  background: var(--el-bg-color);
  border: 1px solid var(--el-border-color-lighter);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  /* 防止在 Grid 布局中撑开列宽 */
  min-width: 0;
  height: 100%;

  &:hover {
    box-shadow: var(--el-box-shadow-lighter);
    border-color: var(--el-border-color);
  }

  .table-content {
    flex: 1;
    overflow: hidden;

    :deep(.el-table) {
      height: 100%;

      .el-table__header {
        th {
          background-color: var(--el-fill-color-light);
          color: var(--el-text-color-regular);
          font-weight: 600;
          font-size: 12px;
          padding: 12px 8px;
          border-bottom: 1px solid var(--el-border-color-lighter);

          .cell {
            padding: 0;
          }
        }
      }

      .el-table__body {
        tr {
          &:hover {
            background-color: var(--el-fill-color-light);
          }

          // 最高完成率行高亮
          &.highlight-row {
            background-color: var(--el-color-warning-light-9) !important;

            &:hover {
              background-color: var(--el-color-warning-light-9) !important;
            }
          }

          td {
            padding: 12px 8px;
            border-bottom: 1px solid var(--el-border-color-extra-light);

            .cell {
              padding: 0;
            }
          }
        }
      }

      .el-table__empty-block {
        padding: 40px 0;
      }
    }

    .channel-name {
      font-weight: 500;
      color: var(--el-text-color-primary);
      font-size: 13px;
    }

    .number-value {
      color: var(--el-text-color-regular);
      font-size: 13px;
      font-weight: 500;
    }

    .completion-rate {
      font-size: 13px;
      padding: 2px 6px;
      border-radius: 4px;
      background-color: var(--el-fill-color);
      border: 1px solid var(--el-border-color-lighter);
    }
  }
}
</style>
